<template>
  <div class="detailsBox">
    <header>
      <ul>
        <li><i class="iconfont icon-zuojiantou" @click="goback"></i></li>
        <li>
          <van-search
            v-model="value"
            placeholder="搜索您想要的区域"
            background="inherit"
            @search="searchArea"
          />
        </li>
        <li><van-icon name="location-o" /></li>
      </ul>
    </header>
    <nav>
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="value1"
          :options="option1"
          @change="community(option1[value1].text)"
        />
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          @change="priceChange(option2[value2].text)"
        />
        <van-dropdown-item
          @open="mainView = false"
          v-model="value3"
          :options="option3"
          class="third"
        />
        <van-dropdown-item
          v-model="value4"
          :options="option4"
          @change="sortChange(option4[value4].text)"
        />
      </van-dropdown-menu>
    </nav>
    <div class="main" v-if="mainView">
      <ul>
        <li
          v-for="item in searchList"
          :key="item.id"
          @click="toHouseDetails(item)"
        >
          <div class="left">
            <img :src="item.showImg" alt="" />
          </div>
          <div class="right">
            <h3>{{ item.location }}</h3>
            <p>{{ item.roomType }}-{{ item.square }}㎡</p>
            <span class="one"> {{ item.rentType }} </span>
            <span class="two"> {{ item.price }}/月 </span>
          </div>
        </li>
      </ul>
    </div>
    <searchFilter @searchContent="resSearch" v-else></searchFilter>
  </div>
</template>

<script>
import searchFilter from "../../../components/searchFilter.vue";
import { getAreaHouse } from "../../../api/index";
import { mapActions } from "vuex";
import { Notify } from "vant";
export default {
  data() {
    return {
      mainView: true,
      value: this.$store.state.searchParams.area,
      value1: 0,
      value2: 0,
      value3: "a",
      value4: 0,
      option1: [{ text: "位置", value: 0 }],
      option2: [
        { text: "租金", value: 0 },
        { text: "1000及以下", value: 1 },
        { text: "1000-2000", value: 2 },
        { text: "2000-3000", value: 3 },
        { text: "3000-4000", value: 4 },
        { text: "4000-5000", value: 5 },
        { text: "5000-7000", value: 6 },
        { text: "7000以上", value: 7 },
      ],
      option3: [{ text: "筛选", value: "a" }],
      option4: [
        { text: "排序", value: 0 },
        { text: "升序", value: 1 },
        { text: "降序", value: 2 },
      ],
      params: "",
      searchList: "",
      initList: "",
    };
  },
  methods: {
    ...mapActions(["houseDetails"]),
    goback() {
      this.$router.push("/hotSearch");
    },
    async resSearch(result) {
      // console.log("我是子组件的值", data);
      this.mainView = result.popView;
      this.params.area = this.value;
      this.params.roomTypeID = result.searchList.rentType;
      if (result.searchList.checkedRadio == "整租") {
        this.params.entire = 1;
      } else if (result.searchList.checkedRadio == "合租") {
        this.params.entire = 0;
      }
      this.params.characteristicId = result.searchList.checkedBox.join(",");
      let {
        data,
        meta: { status },
      } = await getAreaHouse(this.params);
      // console.log(res);

      if (status !== 401) {
        this.searchList = this.dataProcessing(data.newResult);
      } else {
        this.searchList = [];
        Notify({
          message: "无符合条件的房源",
          color: "#fff",
          background: "#97a38b",
          duration: 500,
        });
      }
    },
    async initSearch() {
      // console.log(this.params);
      let {
        data: { newResult },
      } = await getAreaHouse(this.params);
      // console.log(data);
      if (newResult) {
        this.searchList = this.dataProcessing(newResult);
      } else {
        this.searchList = [];
      }
      this.initList = this.searchList;
      // 搜索后位置列表下拉框更新
      let list = [];
      if (this.searchList.length > 0) {
        this.searchList.map((item, index) => {
          list.push(item.location);
        });
        let locationList = new Set(list);
        locationList = Array.from(locationList);
        this.option1 = [{ text: "位置", value: 0 }];
        locationList.forEach((item, index) => {
          this.option1.push({ text: item, value: index + 1 });
        });
      }
    },
    // 搜索框搜索
    async searchArea() {
      this.params.area = this.value;
      let {
        data,
        meta: { status },
      } = await getAreaHouse(this.params);
      this.option1 = [{ text: "位置", value: 0 }];
      if (status !== 401) {
        this.searchList = this.dataProcessing(data.newResult);
        this.initList = this.searchList;
        // 搜索后位置列表下拉框更新
        let list = [];
        this.searchList.map((item, index) => {
          list.push(item.location);
        });
        let locationList = new Set(list);
        locationList = Array.from(locationList);
        this.option1 = [{ text: "位置", value: 0 }];
        locationList.forEach((item, index) => {
          this.option1.push({ text: item, value: index + 1 });
        });
      } else {
        this.searchList = [];
        Notify({
          message: "无符合条件的房源",
          color: "#fff",
          background: "#97a38b",
          duration: 500,
        });
      }
    },
    // 点击位置下拉框后页面数据更新
    async community(val) {
      // this.value1 = 0;
      this.value2 = 0;
      this.value4 = 0;
      let list = [];
      this.initList.forEach((item) => {
        // console.log(item.location,val);
        if (item.location == val) {
          list.push(item);
        }
      });
      this.searchList = list;
      if (val == "位置") {
        this.searchList = this.initList;
      }
    },
    // 获取到的数据处理
    dataProcessing(val) {
      if (Array.isArray(val)) {
        let result = val.map((item, index) => {
          let rentType = item.entire ? "整租" : "合租";
          // console.log(item.entire)
          return {
            location: item.community,
            roomType: item.roomTypeName,
            square: item.size,
            rentType: rentType,
            price: item.priceNum,
            id: item.ID,
            showImg: `http://127.0.0.1:3000/newImg/${
              item.carouselMap.split("|")[0]
            }`,
          };
        });
        return result;
      } else {
        return null;
      }
    },
    toHouseDetails(data) {
      // console.log(data);
      this.houseDetails([data.id, data.location]);
      this.$store.commit("setPrevPage", "/searchDetails");
      this.$router.push("/houseDetails");
    },
    // 根据价格筛选
    async priceChange(val) {
      this.value1 = 0;
      // this.value3 = 0;
      this.value4 = 0;
      switch (val) {
        case "1000及以下":
          this.params.price = 1000;
          break;
        case "1000-2000":
          this.params.price = 2000;
          break;
        case "2000-3000":
          this.params.price = 3000;
          break;
        case "3000-4000":
          this.params.price = 4000;
          break;
        case "4000-5000":
          this.params.price = 5000;
          break;
        case "5000-7000":
          this.params.price = 7000;
          break;
        case "7000及以上":
          this.params.price = 7001;
          break;
        default:
          break;
      }
      let {
        data,
        meta: { status },
      } = await getAreaHouse(this.params);
      // console.log(res);

      if (status !== 401) {
        this.searchList = this.dataProcessing(data.newResult);
      } else {
        this.searchList = [];
        Notify({
          message: "无符合条件的房源",
          color: "#fff",
          background: "#97a38b",
          duration: 500,
        });
      }
      // console.log(res);
    },
    // 排序
    async sortChange(val) {
      // if(this.params.price) {
      // ASC和DES
      if (val == "升序") {
        this.params.sort = "ASC";
      } else if (val == "降序") {
        this.params.sort = "DESC";
      }
      let {
        data,
        meta: { status },
      } = await getAreaHouse(this.params);
      // console.log(res);

      if (status !== 401) {
        this.searchList = this.dataProcessing(data.newResult);
      } else {
        this.searchList = [];
        Notify({
          message: "无符合条件的房源",
          color: "#fff",
          background: "#97a38b",
          duration: 500,
        });
      }
      // console.log(data);
      // }
    },
  },
  components: {
    searchFilter,
  },
  created() {
    // console.log(this.$store.state.searchParams);
    this.params = this.$store.state.searchParams;
    this.initSearch();
  },
};
</script>

<style scoped lang='less'>
* {
  padding: 0;
  margin: 0;
}
header {
  background-color: #ff5654;
  ul {
    display: flex;
    li {
      line-height: 88px;
      color: #fff;
      i {
        font-size: 36px;
        color: #fff;
      }
      &:nth-child(1),
      &:nth-child(3) {
        margin-left: 20px;
      }
      .van-search {
        width: 600px;
        padding: 0;
        margin-top: 15px;
        margin-left: 15px;
      }
    }
  }
}

nav {
  /deep/.van-dropdown-menu__title {
    color: #ff5654;
  }
  /deep/.van-dropdown-menu__title::after {
    border-color: transparent transparent #ff5654 #ff5654;
  }
  .third {
    /deep/.van-dropdown-item__content {
      display: none;
      height: 0 !important;
    }
    /deep/.van-overlay {
      background-color: #eee !important;
    }
  }
}
.main {
  // background-color: #eee;
  ul {
    margin: 20px;
    li {
      display: flex;
      margin-bottom: 20px;
      box-shadow: 0 0 20px #ccc;
      .left {
        margin: 10px 30px 10px 20px;
        img {
          width: 235px;
          height: 170px;
          // border: 1px solid #eee;
        }
      }
      .right {
        flex: 1;
        h3 {
          margin-top: 40px;
          font-size: 24px;
        }
        p {
          margin: 16px 0;
          font-size: 20px;
        }
        .one {
          // display: inline-block;
          float: left;
          width: 90px;
          height: 40px;
          border: 1px solid #618698;
          border-radius: 8px;
          color: #618698;
          font-size: 20px;
          line-height: 40px;
          text-align: center;
        }
        .two {
          float: right;
          margin-right: 8px;
          font-size: 24px;
          color: #ff5654;
        }
      }
    }
  }
}
</style>